<template>
  <el-sub-menu v-if="item.children" :index="item.url" :key="item.url">
    <!-- 添加 key 属性以提高渲染效率 -->
    <template #title>
      <el-icon>
        <component :is="item.icon"></component>
      </el-icon>
      <span>{{ item.name }}</span>
    </template>
    <MyMenu v-for="child in item.children" :item="child" :key="child.url" :index="child.url"></MyMenu>
  </el-sub-menu>


  <el-menu-item v-else :index="item.url" v-show="!(item.name === '订单详情')" @click="add(item.name, item.url, item.icon)">
    <el-icon>
      <component :is="item.icon"></component>
    </el-icon>
    <span>{{ item.name }}</span>
  </el-menu-item>


</template>

<script lang="ts">
import { defineComponent } from 'vue'
import type { PropType } from 'vue'
import type { MenuItemType } from '@/types/user'
import { useTabsStore } from '@/store/tabs'



export default defineComponent({
  name: 'MyMenu',
  props: {
    item: {
      type: Object as PropType<MenuItemType>,
      required: true,
    }
  },
  setup() {
    const tabsStore = useTabsStore()
    const {addTab,setActiveTab} = tabsStore
    //获取标签导航所需要的数据
    const add = (name: string, url: string, icon: string) => {
      addTab( name, url, icon )
      setActiveTab( name, url)
    }
    return { add }
  }
})




</script>


<style scoped lang="less">
.common-hover-style {
  background-color: rgb(34, 136, 255) !important;
  color: white !important;
}

.is-active {
  background-color: rgb(34, 136, 255) !important;
  color: white !important;

  div {
    span {
      color: white;
    }
  }
}

.el-menu-item:hover {
  background-color: rgb(34, 136, 255) !important;
  color: white !important;
}

:deep(.el-sub-menu__title:hover) {
  background-color: rgb(34, 136, 255) !important;
  color: white !important;
}
</style>